<template>
  <div>
    <el-card class="box-card">
      <h2>创建客户</h2>
      <el-form :model="customerForm" ref="customerForm" :rules="rules" label-width="120px">
        <el-form-item label="客户名称：" prop="name">
          <el-input v-model="customerForm.name"></el-input>
        </el-form-item>
        <el-form-item label="电话：" prop="phone">
          <el-input v-model="customerForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="地址：" prop="address">
          <el-input v-model="customerForm.address"></el-input>
        </el-form-item>
        <el-form-item label="传真：">
          <el-input v-model="customerForm.fax"></el-input>
        </el-form-item>
        <el-form-item label="邮箱：">
          <el-input v-model="customerForm.email" type="email"></el-input>
        </el-form-item>
        <el-form-item label="银行名称：">
          <el-input v-model="customerForm.bankName"></el-input>
        </el-form-item>
        <el-form-item label="银行账号：">
          <el-input v-model="customerForm.bankAccount"></el-input>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="customerForm.remarks" type="textarea"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">创建客户</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      customerForm: {
        name: '',
        phone: '',
        address: '',
        fax: '',
        email: '',
        bankName: '',
        bankAccount: '',
        remarks: ''
      },
      rules: {
        name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入电话', trigger: 'blur' }],
        address: [{ required: true, message: '请输入地址', trigger: 'blur' }]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.customerForm.validate((valid) => {
        if (valid) {
          this.customerForm.status = 1;
          this.axios.post('/api/customer/add', this.customerForm)
            .then(() => {
              this.$message({
                message: '客户创建成功',
                type: 'success'
              });
              this.$router.push('/list_customer');
            })
            .catch(error => {
              console.error('Error creating customer:', error);
              this.$message.error('客户创建失败');
            });
        } else {
          this.$message.error('请完整填写必填信息');
        }
      });
    },
    resetForm() {
     this.customerForm = {
                 name:'',
                             phone: '',
                             address: '',
                             fax: '',
                             email: '',
                             bankName: '',
                             bankAccount: '',
                             remarks: ''
              };
    }
  }
};
</script>

<style scoped>
.box-card {
  margin: auto;
  width: 600px;
}
.el-form-item {
  margin-bottom: 20px;
}
</style>
